<template>
	<view class="wanlshop-shop-container" :style="{
		backgroundImage: `url()`
	}">
		<!-- 顶部导航 -->
		<view :style="{ height: `${sys.headHeight}px`}">
			<wanl-shop-head class="wanlshop-shop-container__head" style="background-color: #F8F8F8;"
				:headHeight="sys.headHeight" :headTop="sys.headTop" :tabbarId="tabbarId" :headTabbarId="headTabbarId"
				:shopId="shopData.id" :shopDescription="shopData.description" :pagesNum="pagesNum"
				@headId="handleHeadTabbarId" :isShow="1" />
		</view>
		<!-- 主体内容 -->
		<view class="wanlshop-shop-container__main">
			<view class="info">
				<image class="info-avatar" :src="$wanlshop.oss(shopData.avatar)" mode=""></image>
				
				<!-- <view class="name text-cut text-bold">
					<block v-if="shopData.isself === 1">
						<view class="cu-tag radius sm bg-red">自营</view>
					</block>
					<block v-else>
						<view class="cu-tag radius sm wanl-bg-pink" v-if="shopData.state == 0">个人1</view>
						<view class="cu-tag radius sm wanl-bg-blue" v-else-if="shopData.state == 1">企业</view>
						<view class="cu-tag radius sm wanl-bg-orange" v-else-if="shopData.state == 2">旗舰</view>
					</block>
					<text class="margin-left-xs"> {{shopData.shopname}} </text>
				</view> -->
				<view class="info-r">
					<text class="name">{{shopData.shopname}}</text>
					<text class="fs">店铺粉丝 {{shopData.find_user.fans}}</text>
				</view>
				<view class="btn">
					<button v-if="shopData.isLive" class="cu-btn wlIcon wanl-bg-pink margin-right-sm"
						@click.stop="onLive(shopData.isLive.id)">
						<text class="wlIcon-icon_zhibo-mian text-bold"></text>
					</button>
					<button v-if="shopData.isFollow === 0" class="cu-btn radius-bock text-sm bg-white"
						@click.stop="handleFollow">
						<text class="wlIcon-31xuanze text-bold margin-right-xs"></text> 关注
					</button>
					<button v-else class="cu-btn radius-bock text-sm bg-white" @click.stop="handleFollow">
						<text class="wlIcon-31guanbi text-bold margin-right-xs"></text> 取关
					</button>
				</view>
			</view>



			<swiper class="page" v-show="tabbarId === 'home'" :current-item-id="headTabbarId"
				:style="{ height: `${sys.mainHeight}px`}" @change="changeCurrent" @animationfinish="animationFinish">
				<!-- 主页 -->
				<!-- <swiper-item item-id="page">
					<wanl-shop-page :windowHeight="sys.mainHeight" :pageModules="shopData.page" :shopData="shopData"
						@handleHandleFollow="handleFollow" />
				</swiper-item> -->
				<!-- 新品 -->
				<swiper-item item-id="page">
					<wanl-shop-product :windowHeight="sys.mainHeight" :tabbarHeight="sys.tabbarHeight"
						:tabId="headTabbarId" :option="{shop_id: shopData.id}" />
				</swiper-item>
				<swiper-item item-id="news">
					<wanl-shop-product :windowHeight="sys.mainHeight" :tabbarHeight="sys.tabbarHeight"
						:tabId="headTabbarId" :option="{shop_id: shopData.id}" />
				</swiper-item>
				<!-- 拼团 -->
				<swiper-item item-id="groups">
					<wanl-shop-product :windowHeight="sys.mainHeight" :tabbarHeight="sys.tabbarHeight"
						:tabId="headTabbarId" :option="{shop_id: shopData.id}" />
				</swiper-item>
				<swiper-item item-id="ppg">
					<view class="">
						<view class=""
							style="margin: 30rpx;display: flex;flex-direction: column;align-items: center;box-shadow: 1rpx 3rpx 8rpx #dcdcdc;margin-top: 10rpx;padding: 20rpx;border-radius: 20rpx;"
							v-for="(item,index) in ppgList" :key="index" @click="nav(item)">
							<view class="" style="margin-bottom: 10rpx;text-align: center;font-size: 34rpx;">
								{{item.name}}
							</view>
							<image :src="$wanlshop.oss(item.image, 400, 0)" mode="aspectFill"
								style="border-radius: 20rpx;width: 100%;"></image>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<!-- 全部宝贝 -->
			<wanl-shop-product v-if="tabbarId === 'goods'" class="goods" :windowHeight="sys.mainHeight"
				:tabbarHeight="sys.tabbarHeight" :tabId="tabbarId" :option="{shop_id: shopData.id}" />
			<!-- 发现 -->
			<wanl-shop-find v-if="tabbarId === 'find'" class="find" :windowHeight="sys.mainHeight"
				:tabbarHeight="sys.tabbarHeight" :userNo="shopData.find_user.user_no" />
			<!-- 分类 -->
			<wanl-shop-classify v-if="tabbarId === 'classify'" class="classify" :shopId="shopData.id"
				:mainHeight="sys.mainHeight" :categoryStyle="shopData.categoryStyle === 0 ? 1 : shopData.categoryStyle"
				:categoryData="shopData.category" />

		</view>
		<!-- 底部导航 -->
		<view class="wanlshop-shop-container__tabbar"
			:style="{ height: `${sys.tabbarHeight}px`, paddingBottom:`${sys.tabbarBottom}px` }">
			<view class="cu-bar tabbar">
				<view class="action" @tap="handleTabbar('home')">
					<view v-if="handleActive('home')">
						<view class="cu-avatar round"
							:style="{backgroundImage: `url(${$wanlshop.oss(shopData.avatar, 32, 32)})`}" />
					</view>
					<view v-else>
						<view class="wlIcon-dianpu text-bold"></view>
						<view>首页</view>
					</view>
				</view>
				<view class="action" :class="{ active: handleActive('goods') }" @tap="handleTabbar('goods')">
					<view class="wlIcon-baobei text-bold"></view>
					<view>全部宝贝</view>
				</view>
				<!-- <view class="action" :class="{ active: handleActive('find') }" @tap="handleTabbar('find')">
					<view class="wlIcon-guanzhu1 text-bold"></view>
					<view>发现动态</view>
				</view> -->
				<view class="action" :class="{ active: handleActive('classify') }" @tap="handleTabbar('classify')">
					<view class="wlIcon-fenlei1 text-bold"></view>
					<view>店铺分类</view>
				</view>
				<view class="action">
					<!-- <view v-if="user.id === shopData.user_id" @tap="$wanlshop.to('/pages/apps/find/user')">
						<view class="wlIcon-guanfang text-bold"></view>
						<view>创作中心</view>
					</view> -->
					<view @tap="toChat(shopData.id)">
						<view class="wlIcon-kefu text-bold"></view>
						<view>客服</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopClassify from '@/components/wanl-shop/classify';
	import wanlShopHead from '@/components/wanl-shop/shop/head';
	import wanlShopProduct from '@/components/wanl-shop/shop/product';
	import wanlShopFind from '@/components/wanl-shop/shop/find';
	export default {
		data() {
			return {
				tabbarId: 'home',
				headTabbarId: 'page',
				sys: {
					headTop: 0,
					headHeight: 0,
					mainHeight: 0,
					tabbarBottom: 0,
					tabbarHeight: 0,
				},
				shopData: {
					id: 0,
					avatar: '',
					shopname: '',
					state: 0,
					islive: 0,
					isself: 0,
					categoryStyle: 1,
					find_user: {
						user_no: '',
						fans: 0
					}
				},
				pagesNum: 0,
				ppgList: []
			}
		},
		components: {
			wanlShopHead,
			wanlShopPage,
			wanlShopProduct,
			wanlShopClassify,
			wanlShopFind
		},
		computed: {
			...mapState(['user'])
		},
		onShow() {
			// setTimeout(() => {
			// 	uni.setNavigationBarColor({
			// 		frontColor: this.$store.state.common.modulesData.homeModules.page 
			// 			? this.$store.state.common.modulesData.homeModules.page.style.navigationBarTextStyle 
			// 			: '',
			// 		backgroundColor: this.$store.state.common.modulesData.homeModules.page
			// 			? this.$store.state.common.modulesData.homeModules.page.style.navigationBarBackgroundColor 
			// 			: ''
			// 	})
			// }, 200);
		},
		onReady() {
			this.pagesNum = getCurrentPages().length; // 1.1.9 升级
			let sys = uni.getSystemInfoSync(),
				headHeight = sys.statusBarHeight + uni.upx2px(88), //1.1.2升级
				tabbarHeight = sys.safeAreaInsets.bottom + uni.upx2px(100);
			this.sys = {
				headTop: sys.statusBarHeight, //1.1.2升级
				headHeight: headHeight,
				mainHeight: sys.windowHeight - headHeight,
				tabbarBottom: sys.safeAreaInsets.bottom,
				tabbarHeight: tabbarHeight
			}
		},
		onLoad(query) {
			let id = 0;
			// 判断是否小程序来源 1.1.9升级
			if (query.hasOwnProperty('scene')) {
				let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
				id = scene.id;
			} else {
				id = query.id;
			}
			this.loadData(id);
			if (query.hasOwnProperty('type')) {
				this.tabbarId = query.type;
			}
		},
		methods: {
			async loadData(id) {
				await uni.request({
					url: '/wanlshop/shop/getShopInfo',
					data: {
						id: id
					},
					success: res => {
						this.shopData = res.data
					}
				});
			},
			async handleFollow() {
				if (this.$store.state.user.isLogin) {
					await uni.request({
						url: '/wanlshop/find/user/setFindUser',
						method: 'POST',
						data: {
							id: this.shopData.find_user.user_no,
							type: 'follow'
						},
						success: res => {
							let concern = this.$store.state.statistics.dynamic.concern;
							if (res.data.data === 0) {
								concern -= 1;
								this.shopData.find_user.fans -= 1;
							} else {
								concern += 1;
								this.shopData.find_user.fans += 1;
							}
							this.$store.commit('statistics/dynamic', {
								concern: concern,
							});
							this.shopData.isFollow = res.data.data;
						}
					});
				} else {
					this.$wanlshop.to('/pages/user/auth/auth')
				}
			},
			// 动画
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e)
				//#endif
			},
			// 滚动的tag
			changeCurrent(e) {
				this.headTabbarId = e.detail.currentItemId;
			},
			nav(item) {
				uni.navigateTo({
					url: "/pages/product/list2?id=" + item.id
				})
			},
			handleTabbar(name) {
				this.tabbarId = name;
			},
			handleActive(name) {
				return this.tabbarId === name;
			},
			async handleHeadTabbarId(name) {
				this.headTabbarId = name;
				if (name == "ppg") {
					await uni.request({
						url: '/wanlshop/find/find/getbrandShop',
						data: {
							shop_id: this.shopData.id
						},
						success: res => {
							console.log(res)
							this.ppgList = res.data.data;
						}
					});
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #F8F8F8;
	}

	.wanlshop-shop-container {
		// background-color: #ffffff;

		&__head {
			position: fixed;
			top: 0;
			z-index: 999;
			width: 100%;
			background-color: #ffffff;
		}

		&__main {
			.classify {
				background-color: #f9f9f9;
			}

			.find {
				background-color: #f9f9f9;
				border-radius: 30rpx 30rpx 0 0;
				overflow: hidden;
			}
		}

		&__tabbar {
			position: fixed;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: rgba(255, 255, 255, .96);
			z-index: 999;

			.cu-bar {
				color: #555;

				.action {
					[class*="wlIcon-"] {
						font-size: 45rpx;
					}

					&.active {
						color: #f40;
					}

					.cu-avatar {
						background-color: #f1f1f1;
						height: 74rpx;
						width: 74rpx;
					}
				}
			}
		}
	}
	.info{
		width: 690rpx;
		height: 166rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0 30rpx;
		display: flex;
		align-items: center;
		.info-avatar{
			width: 112rpx;
			height: 105rpx;
			border-radius: 15rpx 15rpx 15rpx 15rpx;
			margin-left: 24rpx;
		}
		.info-r{
			flex: 1;
			margin-left: 21rpx;
			display: flex;
			flex-direction: column;
			.name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #333333;
				line-height: 27rpx;
			}
			.fs{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #9A9A9A;
				line-height: 24rpx;
				margin-top: 20rpx;
			}
			
		}
		.cu-btn{
			padding: 0 20rpx;
			height: 56rpx;
			background: #FFC400;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #181818;
			margin-right: 30rpx;
		}
	}
</style>